<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>  
        .cart {
            border: 1px solid #dedede ;
        }

        .cart-item {
            display: flex ;
            border: 1px solid #dfdfdf ;
            margin: 10px;
        }


        .cart-item>.id ,
        .cart-item>.price ,
        .cart-item>.subtotal {
            flex-basis: 100px ;
        }

        /* 亲子选择器 */
        .cart-item>.name {
            flex-basis: 400px ;
        }

        .cart-item>.number {
            flex-basis: 200px ;
        }

        .cart-item>.number a {
            display: inline-block ;
            width: 20px ;
            background: rgb(77, 77, 253) ;
            color: #fff ;
            text-align: center ;
            border-radius: 2px;
            cursor: pointer ;
            user-select: none ;
        }

        .total-wrapper {
            display: flex ;
        }

        .total-wrapper>.total {
            margin-left: 800px ;
            flex-basis: 100px ;
        }

    </style>
    <script src="vue@3.2.26.js"></script>    
</head>
<body>

    <h3>购物车</h3>

    <ul>
        <li>通过插槽分发内容</li>
        <li>监听子组件事件</li>
    </ul>

    <div class="cart" id="cart-app">
        <cart-item v-for="p in products" :key="p.id">
            <!-- 通过插槽向子组件分发的内容 -->
            <span class="id">{{ p.id }}</span>
            <span class="name">{{ p.name }}</span>
            <span class="price">{{ p.price }}</span>
            <span class="number">
               <!-- 通过插槽向子组件分发内容时，如果要监听事件，则监听器是父组件中的函数 -->
               <a @click="handleReduce(p.id)">-</a>
               <b>{{ p.number }}</b>
               <a @click="handleIncrease(p.id)">+</a>
            </span>
            <span class="subtotal">{{ p.price * p.number }}</span>
        </cart-item>
        <total>
            <!-- 通过插槽向子组件分发的内容 -->
            {{total}}
        </total>
    </div>

    <script>
        const options = {
            data(){
                return {
                    products: [
                        { id: 1234 , name: 'Vue从入门到放弃' , price: 98 , number: 1 },
                        { id: 2345 , name: '哈尔冰红肠' , price: 28 , number: 1 },
                        { id: 1122 , name: 'SpringBoot从没入门到放弃' , price: 88 , number: 1 },
                        { id: 3344 , name: '雪花啤酒(勇闯天涯)' , price: 60 , number: 1 }
                    ]
                }
            },
            methods: {
                handleReduce(id){
                    console.log( 'handleReduce: ' , id );
                    // 根据商品编号从数组中查找指定的商品
                    let product = this.products.find( p => p.id == id );
                    // 若 product 存在则为 true
                    if( product ) {
                        if( product.number > 1 ) {
                            product.number-- ;
                        }
                    }
                },
                handleIncrease(id){
                    console.log( 'handleIncrease: ' , id );
                    // 根据商品编号从数组中查找指定的商品
                    let product = this.products.find( p => p.id == id );
                    // 若 product 存在则为 true
                    if( product ) {
                        product.number++ ;
                    }
                }
            },
            computed: {
                total(){
                    let t = 0 ;
                    this.products.forEach( p => { 
                        t += p.price * p.number ;
                    } );
                    return t ;
                }
            }
        }

        const app = Vue.createApp( options );

        // 定义组件
        const cartItem = {
            template: `<div class="cart-item">
                           <slot></slot>
                       </div>`
        }

        // 注册组件
        app.component( 'cart-item' , cartItem );

        app.component( 'total' , {
            template: `<div class="total-wrapper">
                            <span class="total">
                                <slot></slot>
                            </span>
                        </div>`
        });

        const vm = app.mount( "#cart-app" );

        console.log( vm );
    </script>
    
</body>
</html>